<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>表格页</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<link href="dataTables/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
	<link href="dataTables/css/dataTables.tableTools.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	
	<script type="text/javascript" src="js/plugins/spinner/ui.spinner.js"></script>
	<script type="text/javascript" src="js/plugins/spinner/jquery.mousewheel.js"></script>
	
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<!--
	<script type="text/javascript" src="js/plugins/charts/excanvas.min.js"></script>
	<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>
	
	<script type="text/javascript" src="js/plugins/forms/uniform.js"></script>
	<script type="text/javascript" src="js/plugins/forms/jquery.cleditor.js"></script>
	<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
	<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine.js"></script>
	<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
	<script type="text/javascript" src="js/plugins/forms/autogrowtextarea.js"></script>
	<script type="text/javascript" src="js/plugins/forms/jquery.maskedinput.min.js"></script>
	<script type="text/javascript" src="js/plugins/forms/jquery.dualListBox.js"></script>
	<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
	<script type="text/javascript" src="js/plugins/forms/chosen.jquery.min.js"></script>
	
	<script type="text/javascript" src="js/plugins/wizard/jquery.form.js"></script>
	<script type="text/javascript" src="js/plugins/wizard/jquery.validate.min.js"></script>
	<script type="text/javascript" src="js/plugins/wizard/jquery.form.wizard.js"></script>
	
	<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
	<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
	<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
	<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>
	
	<script type="text/javascript" src="js/plugins/tables/datatable.js"></script>
	<script type="text/javascript" src="js/plugins/tables/tablesort.min.js"></script>
	<script type="text/javascript" src="js/plugins/tables/resizable.min.js"></script>
	
	<script type="text/javascript" src="js/plugins/ui/jquery.tipsy.js"></script>
	<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
	<script type="text/javascript" src="js/plugins/ui/jquery.prettyPhoto.js"></script>
	<script type="text/javascript" src="js/plugins/ui/jquery.progress.js"></script>
	<script type="text/javascript" src="js/plugins/ui/jquery.timeentry.min.js"></script>
	<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
	<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
	<script type="text/javascript" src="js/plugins/ui/jquery.breadcrumbs.js"></script>
	<script type="text/javascript" src="js/plugins/ui/jquery.sourcerer.js"></script>
	
	<script type="text/javascript" src="js/plugins/calendar.min.js"></script>
	<script type="text/javascript" src="js/plugins/elfinder.min.js"></script>
	
	<script type="text/javascript" src="js/custom.js"></script>
	-->
	<!-- 新增js  -->
	<script type="text/javascript" src="dataTables/js/jquery.dataTables.js"></script>	
	<script type="text/javascript" src="dataTables/js/dataTables.tableTools.js"></script>		
  
  </head>
  <body>

	<!-- Right side -->
	<div id="fcontent">
	    <!-- Title area -->
	    <div class="titleArea">
	        <div class="wrapper">
	            <div class="pageTitle">
	                <h5>Charts and graphs</h5>
	                <span>Do your layouts deserve better than Lorem Ipsum.</span>
	            </div>

	            <div class="clear"></div>
	        </div>
	    </div>
	    <div class="line"></div>
	    <!-- Main content wrapper -->
	    <div class="wrapper">
	        <!-- Note -->
	        <div class="nNote nInformation hideit">
	            <p><strong>INFORMATION: </strong>Statistics info above is clickable, with nice dropdowns and updating status.</p>
	             <input type="button" id="btnTest" value="根据条件重新响应后台Ajax" />
	        </div>
	       <!-- Dynamic table -->
	        <div class="widget">
	            <div class="title"><img src="images/icons/dark/full2.png" alt="" class="titleIcon" /><h6>Dynamic table</h6></div>    
	            <!--                      
	            <table cellpadding="0" cellspacing="0" border="0" class="display dTable">
	            <thead>
	            <tr>
	            <th>Rendering engine</th>
	            <th>Browser</th>
	            <th>Platform(s)</th>
	            <th>Engine version</th>
	            </tr>
	            </thead>
	            <tbody id="aa">

	            </tbody>
	            </table> 
	             -->    
	              
	            <table id="example" class="display" cellspacing="0" width="100%">
					    <thead>
					        <tr>
					            <th title="ddd">Name</th>
					            <th>Position</th>
					            <th>Office</th>
					            <th>Extn.</th>
					            <th>Start date</th>
					            <th>Salary</th>
					        </tr>
					    </thead>
					 	<!--  
					    <tfoot>
					        <tr>
					            <th>Name</th>
					            <th>Position</th>
					            <th>Office</th>
					            <th>Extn.</th>
					            <th>Start date</th>
					            <th>Salary</th>
					        </tr>
					    </tfoot>
					    -->
					</table> 
	        </div>

	  

	     </div>
	</div>
	<script type="text/javascript">
	var tb1;
	$(function () {

		//$("#aa").html('	<tr class="gradeC"><td>Trident</td> Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> </tr><tr class="gradeX"><td>Trident</td><td>InternetExplorer 4.0</td><td>Win 95+</td><td class="center">4</td></tr>');

		var tb1 = $('#example').dataTable( {
		  	"sDom": 'T<"clear">lfrtip',
		  	/*
	        "tableTools": {
	            "sSwfPath": "dataTables/swf/copy_csv_xls_pdf.swf"
	        },*/
	        "oTableTools": {
	         	"sSwfPath": "dataTables/swf/copy_csv_xls_pdf.swf",
	            "aButtons": [
	                "copy",
	                "print",
	                {
	                    "sExtends":    "collection",
	                    "sButtonText": "Save",
	                    "aButtons":    [ "csv", "xls", "pdf" ]
	                }
	            ]
	        },
	        "sServerMethod":"POST",
		 	"searching":false,
		 	"bFilter":true,
		 	"bServerSide": true,
		 	"bProcessing":true,
		 	"bSort":true,
		 	"sAjaxDataProp" : "dataResult",
	        //"ajax": "http://localhost:8080/iService/demo/grid/queryList",
	        "sAjaxSource": "http://localhost:8080/iService/demo/grid/queryList", //给服务器发请求的url
	        "columns": [
	            { "data": "name","sClass": "center" },
	            { "data": "position" },
	            { "data": "office" },
	            { "data": "extn" },
	            { "data": "start_date" },
	            { "data": "salary" }
	        ],
	         "oLanguage" : {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "名称:",
                "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
                }
                     
            }
	    } );
	    
	        $("#btnTest").click(function () {
	        	var oSettings = tb1.fnSettings();
                oSettings.sAjaxSource = "http://localhost:8080/iService/demo/grid/queryList?aa=s";
                tb1.fnClearTable(0);
                tb1.fnDraw();

            });
            /*
            $("th").click(function () {
				alert($(this).attr("class"));
	        	var oSettings = tb1.fnSettings();
                oSettings.sAjaxSource = "http://localhost:8080/iService/demo/grid/queryList?aa=sss&bb=vv";
                tb1.fnClearTable(0);
                tb1.fnDraw();

            });
            */
	    
	})
	
	
	</script>
  </body>
</html>
